import React, { useRef, useState } from "react";

const ImageCutout = () => {
  const canvasRef = useRef(null); // 主 Canvas
  const resultCanvasRef = useRef(null); // 用于显示抠图结果的 Canvas
  const [image, setImage] = useState(null); // 上传的图片
  const [isDrawing, setIsDrawing] = useState(false); // 是否正在绘制选区
  const [startX, setStartX] = useState(0); // 选区起始 X 坐标
  const [startY, setStartY] = useState(0); // 选区起始 Y 坐标
  const [endX, setEndX] = useState(0); // 选区结束 X 坐标
  const [endY, setEndY] = useState(0); // 选区结束 Y 坐标

  // 处理图片上传
  const handleImageUpload = (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
      const img = new Image();
      img.src = e.target.result;
      img.onload = () => {
        setImage(img);
        const canvas = canvasRef.current;
        const ctx = canvas.getContext("2d");
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      };
    };
    reader.readAsDataURL(file);
  };

  // 鼠标按下事件：开始绘制选区
  const handleMouseDown = (event) => {
    setIsDrawing(true);
    const { offsetX, offsetY } = event.nativeEvent;
    setStartX(offsetX);
    setStartY(offsetY);
    setEndX(offsetX);
    setEndY(offsetY);
  };
  
  // 鼠标移动事件：更新选区
  const handleMouseMove = (event) => {
    if (!isDrawing) return;

    const { offsetX, offsetY } = event.nativeEvent;
    setEndX(offsetX);
    setEndY(offsetY);
    
    // 实时绘制选区框
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = "red";
    ctx.lineWidth = 2;
    ctx.strokeRect(startX, startY, offsetX - startX, offsetY - startY);
  };

  // 鼠标释放事件：完成选区并抠图
  const handleMouseUp = () => {
    setIsDrawing(false);

    const canvas = canvasRef.current;
    const resultCanvas = resultCanvasRef.current;
    const ctx = canvas.getContext("2d");
    const resultCtx = resultCanvas.getContext("2d");

    // 计算选区宽度和高度
    const width = endX - startX;
    const height = endY - startY;

    // 获取选区内的像素数据
    const imageData = ctx.getImageData(startX, startY, width, height);

    // 将选区绘制到结果 Canvas 上
    resultCanvas.width = width;
    resultCanvas.height = height;
    resultCtx.putImageData(imageData, 0, 0);
  };

  return (
    <div>
      
      <h1>图片抠图工具</h1>
      <input type="file" accept="image/*" onChange={handleImageUpload} />
      <div style={{ display: "flex", marginTop: "20px" }}>
        <div>
          <h3>原图</h3>
          <canvas
            ref={canvasRef}
            onMouseDown={handleMouseDown}
            onMouseMove={handleMouseMove}
            onMouseUp={handleMouseUp}
            style={{ border: "1px solid black" }}
          />
        </div>
        <div></div>
        <div style={{ marginLeft: "20px" }}>
          <h3>抠图结果</h3>
          <canvas
            ref={resultCanvasRef}
            style={{ border: "1px solid black" }}
          />
        </div>
      </div>
    </div>
  );
};

export default ImageCutout;